<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="120px"
      :inline="false"
      size="normal"
    >
      <el-form-item label="小程序id" prop="appkey">
        <el-input v-model="form.appkey"></el-input>
      </el-form-item>
      <el-form-item label="小程序secret" prop="secret">
        <el-input v-model="form.secret"></el-input>
      </el-form-item>
      <el-form-item label="监控名称" prop="device_name">
        <el-input v-model="form.device_name"></el-input>
      </el-form-item>
      <el-form-item label="监控序列码" prop="deviceserial">
        <el-input v-model="form.deviceserial"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addVideo"
          style="width: 100%"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="video_list" stripe style="width: 95%; float: right;margin-left:20px;">
      <el-table-column label="监控名称" prop="ezviz_name"> </el-table-column>
      <el-table-column label="序列号" prop="deviceserial"> </el-table-column>
      <el-table-column align="right" width="100">
        <template slot="header" slot-scope="scope" fixed="right">
          操作</template
        >
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="deleteVideo(scope.row.deviceserial)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      form: {
        appkey: "",
        secret: "",
        device_name:"",
        deviceserial: "",
      },
      rules: {
        appkey: [{ required: true, message: "必填", trigger: "blur" }],
        secret: [{ required: true, message: "必填", trigger: "blur" }],
        device_name: [{ required: true, message: "必填", trigger: "blur" }],
        deviceserial: [{ required: true, message: "必填", trigger: "blur" }],
      },
      video_list: [],
    };
  },
  methods: {
    getAppInformation() {
      try {
        this.form.appkey = this.video_list[0].appkey
          ? this.video_list[0].appkey
          : "";
        this.form.secret = this.video_list[0].secret
          ? this.video_list[0].secret
          : "";
      } catch (error) {}
    },
    getVideoList() {
      return new Promise((resolve) => {
        this.$axios({
          method: "post",
          url: "/api/HIKapi/dispatcher",
          data: {
            action: "list_ezviz",
            openid: this.$store.state.unionid,
            zone_id: this.id,
          },
        }).then((res) => {
          if (res.data.ret == 0) {
            resolve(res.data);
          }
        });
      });
    },
    addVideo() {
      this.$refs["form"].validate((res) => {
        if (res) {
          this.$confirm("确认新增该摄像头？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$axios({
                method: "post",
                url: "/api/HIKapi/dispatcher",
                data: {
                  action: "add_ezviz",
                  openid: this.$store.state.unionid,
                  appkey: this.form.appkey,
                  secret: this.form.secret,
                  ezviz_name:this.form.device_name,
                  deviceserial: this.form.deviceserial,
                  zone_id: this.id,
                },
              }).then((res) => {
                if (res.data.ret == 0) {
                  this.$message.success("添加摄像头成功");
                  this.getVideoList().then((res) => {
                    this.video_list = res.data;
                    this.getAppInformation();
                  });
                } else {
                  this.$message.error("添加摄像头失败");
                }
              });
            })
            .catch(() => {});
        }
      });
    },
    deleteVideo(deviceserial) {
      this.$confirm("确认删除该摄像头？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "/api/HIKapi/dispatcher",
            data: {
              action: "del_ezviz",
              deviceserial: deviceserial,
            },
          }).then((res) => {
            if (res.data.ret == 0) {
              this.$message.success("删除摄像头成功");
              this.getVideoList().then((res) => {
                this.video_list = res.data;
                this.getAppInformation();
              });
            } else {
              this.$message.error("删除摄像头失败");
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getVideoList().then((res) => {
      this.video_list = res.data;
      this.getAppInformation();
    });
  },
};
</script>

<style lang="less" scoped>
</style>